// 渲染函数
pageRender = (data) => {
    return data.reduce((pre, next) => {
        pre += `<tr><th>${next.id}</th><th>${next.name}</th><th>${next.age}</th><th>${next.gender}</th></tr>`
        return pre
    }, '')
}


// 默认排序
defaultSort = () => {
    var newData = data.sort((a, b) => a.age - b.age)
    return {
        result: pageRender(newData),
        newData
    }
}

// 从大到小排序
climaol = () => {
    var newData = data.sort((a, b) => b.age - a.age)
    return {
        result: pageRender(newData),
        newData
    }
}

// 从小到大
desc = () => {
    var newData = data.sort((a, b) => a.age - b.age)
    return {
        result: pageRender(newData),
        newData
    }
}

// 只显示男性
showMan = () => {
    return pageRender(data.filter(item => item.gender === '男'))
}

// 只显示女性
showWoman = (data) => {
    return pageRender(data.filter(item => item.gender === '女'))
}

// 点击年龄和性别触发的逻辑(定义函数的目的是用来解决点击事件触发后页面不刷新的问题)
tableRender = (num, idx) => {
    if (num === 0) {
        const {
            result,
            newData
        } = desc()
        if (idx === 0) {
            $('#container').html(showMan(newData))
        } else if (idx === 1) {
            $('#container').html(showWoman(newData))
        } else if (idx === 2) {
            $('#container').html(result)
        }
    } else if (num === 1) {
        const {
            result,
            newData
        } = climaol()
        if (idx === 0) {
            $('#container').html(showMan(newData))
        } else if (idx === 1) {
            $('#container').html(showWoman(newData))
        } else if (idx === 2) {
            $('#container').html(result)
        }
    } else if (num === 2) {
        const {
            result,
            newData
        } = defaultSort()
        if (idx === 0) {
            $('#container').html(showMan(newData))
        } else if (idx === 1) {
            $('#container').html(showWoman(newData))
        } else if (idx === 2) {
            $('#container').html(result)
        }
    }

}